<template>
	<view class="mall">
		<Search class="search"></Search>
		<router-view>
			<view class="mall-center">
				<view class="mall-1">
					<view class="mall-header">
						 <view class="item" v-for="item in typelist" :key="item.cateId">
							 <!-- 跳转传值 -->
							 <navigator url="./mall-category/mall-category" hover-class="null" open-type="navigate" @click="itemclick(item.cateId)">
								 
								 <view class="item-image">
								 		<image :src="item.cateImage"></image>
								 </view>
								 
								 <view class="item-text">
									 
								 		<text>{{item.cateName}} </text>
								 </view>
							 </navigator>
							
						 </view>
					 </view>
					<view class="mall-center">
						<view style="display: flex;">
							<view class="mall-banner1">
								<image  class="mall-center1" src="https://z3.ax1x.com/2021/04/08/cYpL8g.png"></image>
								<view class="mall-center1-sekuai">
										<text>机油直降</text>
								</view>
							</view>
							<view class="mall-banner2">
								<image  class="mall-center2" src="https://z3.ax1x.com/2021/04/08/cY9DzQ.png"> </image>
								<view class="mall-center2-sekuai">
										<text>轮胎99元抢</text>
								</view>
								 
							</view>
							<view class="mall-banner1">
								<image  class="mall-center1" src="https://z3.ax1x.com/2021/04/08/cY9QPO.png"></image>
								<view class="mall-center1-sekuai">
										<text>9.9抢购</text>
								</view>
							</view>
						
						</view>
						
						<view>
							<image  class="mall-center4" src="https://z3.ax1x.com/2021/04/08/cY95z4.png"></image>
						</view>
					</view>
				</view>
				<view class="mall-2">
					<!-- 第一小块 -->
					 <view  class="one">
						 <view class="mall-seckill">
							 <text class="text">限时秒杀 </text>
							 <view class="view">
								<view class="text">
									<uni-countdown  :show-day="false"    :hour="23" :minute="59" :second="59"></uni-countdown>
								 </view>
								
							 </view>
						 </view>
						 <view class="discount"> 全场5折起 </view>
						 <view class="rob" > 
						     <view class="view-item" v-for="item in seckill" :key="item.id">
								 <image class="item-image" :src="item.image"></image>
								 <view>
									 <text>￥{{item.usedtext}}</text>
									 <text>￥{{item.new}}</text>
								 </view>
							 </view>
						 </view>
					 </view>
					 
					 <!-- 第二小块 -->
					<view class="two">
						 <view class="item">
							 <view>开优卡</view>
							 <view>12元5次洗车</view>
							 <view>
								 <image src="https://z3.ax1x.com/2021/04/08/cYFVfK.png"></image>
							 </view>
						 </view>
						 <view class="item">
							 <view>万人团</view>
							 <view>13.9元包邮</view>
							 <view>
								<image src="https://z3.ax1x.com/2021/04/08/cYFXBd.png"></image>
							 </view>
						 </view>
					</view>   
					
				  
					<!-- 第三小块 -->
					 <view class="three">
						 <view class="item">
							 <view>轮胎新人福利</view>
							 <view>低至99元起</view>
							 <view>
								<image src="https://z3.ax1x.com/2021/04/08/cJxDDP.png"></image>
								<image src="https://z3.ax1x.com/2021/04/08/cJX6N4.png"></image>
							 </view>
						 </view>
					 </view>
					  <!-- 第四小块 -->
					<view class="three">
						 <view class="item">
							 <view>保养新人福利</view>
							 <view>首单价88元起</view>
							 <view>
								<image src="https://z3.ax1x.com/2021/04/08/cJxt4e.png"></image>
								<image src="https://z3.ax1x.com/2021/04/08/cJzeqP.png"></image>
							 </view>
						 </view>
					</view>
				</view>	
				
				<!-- 热销榜 -->
				<view  class="mall-3">
					<view class="hot">热销榜</view>
					<view class="item" v-for="item in hot" :key="item.id">
						<view class="item-imgage">
							<image :src="item.image"></image>
						</view>
						<view class="item2">机油TOP榜 》</view>
						<view class="item3">
							<text class="item-price">￥{{item.price}}</text>
							<text class="item-text">￥55 </text>
							<image class="item-imgage" src="https://z3.ax1x.com/2021/04/08/cYADzT.png"></image>
						</view>
					</view>
					
				</view>
			<!-- 精选推荐 -->
				<Selected></Selected>
				
			</view>
		</router-view>
	</view>
</template>

<script>
	import Search from '../../components/mall-search/mall-search.vue'
	import Selected from '../../components/selected-recommendation/selected-recommendation.vue'
	
    import {createNamespacedHelpers} from "vuex"
    const {mapState,mapMutations,mapActions} = createNamespacedHelpers("mall");
	export default {
		data() {
			return {
				mallImage:[
					{id:1,image:"https://z3.ax1x.com/2021/04/08/cJzys1.png",text:"常用配件"},
					{id:2,image:"https://z3.ax1x.com/2021/04/08/cYSh7V.png",text:"精品养护"},
					{id:3,image:"https://z3.ax1x.com/2021/04/08/cYSH1J.png",text:"内饰精品"},
					{id:4,image:"https://z3.ax1x.com/2021/04/08/cYSbc9.png",text:"车载电器"},
					{id:5,image:"https://z3.ax1x.com/2021/04/08/cYSFoT.png",text:"精品机油"},			
					{id:6,image:"https://z3.ax1x.com/2021/04/08/cJzLo8.png",text:"灯光升级"},
					{id:7,image:"https://z3.ax1x.com/2021/04/08/cYSj76.png",text:"轮胎品牌"},
					{id:8,image:"https://z3.ax1x.com/2021/04/08/cYSSQs.png",text:"隔音音响"}
				],
				seckill:[
					{id:0,image:"https://z3.ax1x.com/2021/04/08/cYCw01.png",usedtext:100,new:20},
					{id:1,image:"https://z3.ax1x.com/2021/04/08/cYC79S.png",usedtext:101,new:21}
				],
				hot:[
					{id:0,image:"https://z3.ax1x.com/2021/04/08/cYkXxU.png",price:299},
					{id:1,image:"https://z3.ax1x.com/2021/04/08/cYAVMD.png",price:299},
					{id:2,image:"https://z3.ax1x.com/2021/04/08/cYAudA.png",price:299},
				]
			}
		},
        mounted() {
          this.getType();
        },
		computed:{
			...mapState(["typelist"])
		},
		components:{
			Search,Selected
		},
		methods:{
			...mapMutations(["setList"]),
			...mapActions(["getType"]),
		
			itemclick(val){
				// 本地存储
				uni.setStorageSync("Id",val)			
			}
		}
}
</script>

<style lang="scss" scoped>
.search{
		width: 100vw;
		position: fixed;
		top: 0rpx;
		z-index: 999;
		background-color: #FFFFFF !important;
	}
.mall-center{
		margin-top:120rpx ;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #f9f9f9;
		.mall-1{
			margin-bottom: 40rpx;
			.mall-header{
				display: flex;
				flex-wrap: wrap;
				border-radius: 10rpx;
				margin-left: 24rpx;
				background-color: #FFFFFF;
				.item{
					margin:20rpx;
					.item-image{
						width: 120rpx;
						height: 120rpx;
						image{
							width: 100%;
							height: 100%;
						}
						
					}
					.item-text{
						margin-top: 10rpx;
						font-size: 28rpx;
					}
				}
				
				
			}
			.mall-center{
				margin-top: 60rpx;
				text-align: center;
				.mall-banner1{
					// margin-top: 40rpx;
					width: 200rpx;
					height: 160rpx;
					background-image:url(https://z3.ax1x.com/2021/04/08/cYCbcQ.png);
					background-repeat: no-repeat;
					background-size:200rpx 160rpx;
					position: relative;
					.mall-center1{
						width: 200rpx;
						height: 180rpx;
						position:absolute;
						top: -40rpx;
						left: 0rpx;
					}
					.mall-center1-sekuai{
						width: 200rpx;
						height: 50rpx;
						color: #ff0000;
						text-align: center;
						font-size: 32rpx;
						line-height: 50rpx;
						font-weight: 600;
						position: absolute;
						top: 120rpx;
						left: 0rpx;
						background-image:url(https://z3.ax1x.com/2021/04/08/cYPeN6.png);
						background-size:200rpx 50rpx;
						background-repeat: no-repeat;
					}
					
				}
				
				.mall-banner2{
					margin-top: 20rpx;
					width: 240rpx;
					height: 200rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
					background-image:url(https://z3.ax1x.com/2021/04/08/cYCbcQ.png);
					background-repeat: no-repeat;
					position: relative;
					background-size: 240rpx 200rpx;
					.mall-center2{
						width: 200rpx;
						height: 200rpx;
						position:absolute;
						top: -20rpx;
						left: 20rpx;
						animation-name: donghua; /*绑定到keyframe的名称*/
						animation-timing-function: linear;/*规定动画的速度曲线*/
						animation-iteration-count: infinite;/*规定动画应该播放的次数*/
						animation-duration: 1s;/*动画所花费的时间*/
						// animation-direction: alternate;/*是否应该轮流反向播放动画*/
						@keyframes donghua{
								 0% {  
									transform:rotate(0deg);  
								} 
								100% {  
								   transform:rotate(360deg);
								}  
						}
					}
					.mall-center2-sekuai{
						width: 240rpx;
						height: 50rpx;
						color: #FFFFFF;
						position: absolute;
						top: 150rpx;
						left: 0rpx;
						background-image:url(https://z3.ax1x.com/2021/04/08/cYPa8S.png);
						background-repeat: no-repeat;
						
						
						
					}
				}
				
				.mall-center3{
					width: 184rpx;
					height: 184rpx;
					
				}
				.mall-center4{
					width: 100%;
					height: 180rpx;
					
				}
				
			}
			}
		
		.mall-2{
			margin-left: 12rpx;
			margin-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
				.one{
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					border-radius: 20rpx;
					width: 48%;
					// height: 280rpx;
					background-color: #FFFFFF;
					.mall-seckill{
						margin-top: 12rpx;
						width: 100%;
						height: 40rpx;
						display: flex;
						.text{
							width: 45%;
							font-size: 32rpx;
							color:#666666 ;
						}
						.view{
							width: 55%;
							height: 40rpx;
							line-height: 40rpx;
							display: flex;
							font-size: 20rpx;
							.text{
								margin-left: 30rpx;
									text-align: center;
									width: 80%;
									color:#ffb908;
									border-radius: 15rpx 15rpx 15rpx 15rpx;
									.countdown{
										width: 100rpx;
									}
									
									
							}
							
						}
						
					}
					}
					.discount{
						width: 100%;
						height: 20rpx;
						color: #999999;
						font-size: 20rpx;
					}
					.rob{
						margin-top: 10rpx;
						width: 100%;
						height: 170rpx;
						display: flex;
						justify-content: space-between;
						.view-item{
							width: 45%;
							text-align: center;
							height: 100%;
							.item-image{
								width: 100rpx;
								height: 100rpx;
								
							}
							view{
								margin-top: 10rpx;
								width: 100%;
								height: 40rpx;
								text{
									&:nth-child(1){
										color:#ff5300;
										height: 40rpx;
									}
									&:nth-child(2){
										color: #808080;
										font-size: 24rpx;
										height: 40rpx;
										text-decoration: line-through;
									}
								}
							
								
							}
						}
					
					}
				
				
			}
				.two{
					margin-right: 10rpx;
					border-radius: 20rpx;
					display: flex;
					width: 48%;
					background-color: #FFFFFF;
					.item{
						margin-top: 20rpx;
						width: 50%;
						height: 230rpx;
						view{
							&:nth-child(1){
								margin-left: 20rpx;
								width: 100%;
								color: #555555;
								font-size: 38rpx;
							}
							&:nth-child(2){
								margin-left: 20rpx;
								width: 100%;
								color:#ff5300;
								font-size: 24rpx;
								margin-bottom: 10rpx;
							}
							&:nth-child(3){
								margin-left: 20rpx;
								width: 80%;
								height: 130rpx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
					
				}
			}
				.three{
					margin-right: 10rpx;
					border-radius: 20rpx;
					display: flex;
					width: 48%;
					background-color: #FFFFFF;
					.item{
						margin-top: 20rpx;
						width: 100%;
						height: 230rpx;
						view{
							&:nth-child(1){
								margin-left: 20rpx;
								width: 100%;
								color: #555555;
								font-size: 38rpx;
							}
							&:nth-child(2){
								margin-left: 20rpx;
								width: 100%;
								color:#ff5300;
								font-size: 24rpx;
								margin-bottom: 10rpx;
							}
							&:nth-child(3){
								margin-left: 20rpx;
								width: 80%;
								height: 130rpx;
								margin-right: 40rpx;
								image{
									width: 50%;
									height: 110%;
								}
							}
						}
					
			}
		}
		// 热销榜
		.mall-3{
			margin-top: 80rpx;
			margin-bottom: 80rpx;
			width: 100vw;
			height: 500rpx;
			margin: 24rpx;
			.hot{
				color: #555555;
				font-size: 48rpx;
				margin-bottom: 40rpx;
			}
			.item{
				float: left;
				width: 29%;
				height: 400rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
				background-color: #FFFFFF;
				.item-imgage{
					margin-top: 20rpx;
					width: 100%;
					image{
						width: 85%;
						height: 240rpx;
					}
					
				}
			}
			.item2{
				color: #808080;
			}
			.item3{
				.item-price{
					font-size: 28rpx;
					color: #d97b1d;
					
				}
				.item-text{
					font-size: 20rpx;
					color: #fbab0a;
				}
				.item-imgage{
					width: 60rpx;
					height: 20rpx;
				}
			}
		}
		
}
</style>
